<template>
    <div class="loginpage">
        <p>帐号登录</p>
        <van-row style="margin-top: 5rem;">
          <van-col>&nbsp;</van-col>
        </van-row>
        <van-row>
          <van-image
            round
            width="8rem"
            height="8rem"
            :src="require('@/common/img/login.png')"
          />
        </van-row>
        <van-row style="margin-top: 3rem;">
          <van-col span="20" offset="2">
                  <van-form @submit="onSubmit">
                      <van-field
                          v-model="username"
                          name="username"
                          label="用户名"
                          placeholder="用户名"
                          :rules="[{ required: true, message: '请填写用户名' }]"
                      />
                      <van-field
                          v-model="password"
                          type="password"
                          name="password"
                          label="密码"
                          placeholder="密码"
                          :rules="[{ required: true, message: '请填写密码' }]"
                      />
                  <div style="margin: 16px;">
                      <van-button round block type="info" native-type="submit">登录</van-button>
                      
                  </div>
              </van-form>
          </van-col>

        </van-row>
        <van-row>
            <van-col span="4">
              
            </van-col>
            <van-col span="4" offset="8" @click="register">
              注册
            </van-col>
            <van-col span="6" offset="1" @click="forgetpass">
              忘记密码
            </van-col>
        </van-row>



    </div>
  
  
</template>

<script>
import {login} from '@/api/index'
import { Toast } from 'vant';
export default {
  data() {
    return {
      username: '',
      password: '',
    };
  },
  methods: {
    onSubmit(values) {
          // console.log(values);
          login(values).then(res=>{
                        localStorage.setItem("username",values.username);
                        if(res.data.status)//登录成功
                        {
                            this.$router.push("/homepage")
                            //  JSON.stringify(res.msg)
                          
                            // console.log("打印用户名"+values.username);
    
                        }else{
                            Toast("密码或者账号错误")
                        }
                        
          })


    },
    // 注册用户
    register(){
      this.$router.push("/addUser")
    },
    //忘记密码

    forgetpass(){
      this.$router.push("/forgetpass")
    }
  },
};
</script>
<!-- 
<style>
   .loginpage{
      width: 100%;
      height: 100%;
      background: url('@/common/img/bg.jpg') no-repeat;
      background-size: 100% 130%;
   }
  

    #login_box {
   
      background-color: #00000060;
      margin: auto;
      margin-top: 10%;
      text-align: center;
      border-radius: 10px;
      padding: 50px 50px;
    }

    h2 {
      color: #ffffff90;
      margin-top: 5%;
    }

    #input-box {
      margin-top: 5%;
    }

    span {
      color: #fff;
    }

    input {
      border: 0;
      width: 60%;
      font-size: 15px;
      color: #fff;
      background: transparent;
      border-bottom: 2px solid #fff;
      padding: 5px 10px;
      outline: none;
      margin-top: 10px;
    }

    button {
      margin-top: 50px;
      width: 60%;
      height: 30px;
      border-radius: 10px;
      border: 0;
      color: #fff;
      text-align: center;
      line-height: 30px;
      font-size: 15px;
      background-image: linear-gradient(to right, #30cfd0, #330867);
    }

    #sign_up {
      margin-top: 45%;
      margin-left: 60%;
    }

    a {
      color: #b94648;
    }

</style> -->